<template>
    <div class="default-main ba-table-box">
        <el-row :gutter="30">
            <el-col :xs="24" :sm="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>信息设置</span>
                        </div>
                    </template>
                    <el-form label-width="80px" ref="infoRef" size="large" :model="info.data">
                        <el-form-item label="头像">
                            <uploadimg dir="admin" v-model="info.data.headimg"/>
                        </el-form-item>
                        <el-form-item label="账号" prop="account" :rules="[{required: true,message: '请输入账号',trigger: 'blur'}]">
                            <el-input v-model="info.data.account" placeholder="请输入账号"/>
                        </el-form-item>
                        <el-form-item label="昵称" prop="nickname" :rules="[{required: true,message: '请输入昵称',trigger: 'blur'}]">
                            <el-input v-model="info.data.nickname" placeholder="请输入昵称"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="submit-button" type="primary" size="large" :loading="info.loading" @click="onInfoSubmit(infoRef)">
                                提交
                            </el-button>
                        </el-form-item>
                    </el-form>                   
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="12">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>密码设置</span>
                        </div>                     
                    </template>
                    <el-form label-width="80px" ref="passwordRef" size="large" :model="password.data">
                        <el-form-item label="新密码" prop="password" :rules="[{required: true,message: '请输入密码',trigger: 'blur'}]">
                            <el-input type="password" v-model="password.data.password" placeholder="请输入密码"/>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="password2" :rules="[{required: true,message: '请确认密码',trigger: 'blur'}]">
                            <el-input type="password" v-model="password.data.password2" placeholder="请确认密码"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="submit-button" type="primary" size="large" :loading="password.loading" @click="onPasswordSubmit(passwordRef)">
                                提交
                            </el-button>
                        </el-form-item>
                    </el-form>  
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>



<script setup lang="ts">
import { ref,reactive } from 'vue'
import { ElForm, ElNotification } from 'element-plus'
import uploadimg from '/@/components/uploadimg/index.vue'
import { getInfo as getInfoApi,editInfo,editPassword } from '/@/api/admin'
import { useAdminInfo } from '/@/stores/adminInfo'

const infoRef = ref<InstanceType<typeof ElForm>>()
const passwordRef = ref<InstanceType<typeof ElForm>>()
const adminInfo = useAdminInfo()

const info = reactive({
    loading: false,
    data:{
        headimg:'',
        account: '',
        nickname: ''
    }
})

const password = reactive({
    loading: false,
    data:{
        password:'',
        password2: ''
    }
})

const getInfo = async () => {
    const {data} = await getInfoApi()
    info.data.headimg = data.headimg
    info.data.account = data.account
    info.data.nickname = data.nickname
}

getInfo()

const onInfoSubmit = (formEl: InstanceType<typeof ElForm> | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            info.loading = true
            try{
                await editInfo(info.data)
                const {data} = await getInfoApi()
                adminInfo.$state = data
                ElNotification({
                    message: '修改成功',
                    type: 'success'
                })
            }finally{
               info.loading = false 
            }         
        }
    })
}

const onPasswordSubmit = (formEl: InstanceType<typeof ElForm> | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            password.loading = true
            try{
                await editPassword(password.data)
                ElNotification({
                    message: '修改成功',
                    type: 'success'
                })
                password.data = {
                    password:'',
                    password2: ''
                }
            }finally{
               password.loading = false 
            }         
        }
    })
}

</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'admin',
})
</script>

<style scoped lang="scss">
    .submit-button{
        width:100%;
    }
</style>